<template>
  <div class="container">
    <nav-moudel></nav-moudel>
    <div class="wrapleftNav">
      <indexBanner></indexBanner>
      <sentence-moudel></sentence-moudel>
    </div>
    <div class="wrapright MobileHide">
      <div
        class="siderBox"
        :class="{acticeFlex: leaveHead}">
        <sider-moudel></sider-moudel>
      </div>
      <!-- <re-mark></re-mark>
      <auth-info></auth-info>
      <art-tag></art-tag> -->
    </div>
  </div>
</template>

<script>
import scrollEvent from '~/mixins/scrollEvent'
import indexBanner from '~/components/banner.vue';
import sentenceMoudel from '~/components/sentenceMoudel.vue'
import siderMoudel from '~/components/layout/siderMoudel.vue'
import navMoudel from '~/components/layout/navMoudel.vue'
import reMark from '~/components/reMark.vue';
import artTag from '~/components/artTag.vue';
import authInfo from '~/components/authInfo.vue';
import { mapMutations, mapGetters, mapActions} from 'vuex';

export default {
  layout: 'current',
  data () {
    return {
      pageInfo: {},
      recommendAuthors: [],
      recommendBooks: [],
      leaveHead: false,
      scrollBottom: 0
    };
  },
  async asyncData({store}) {
    await store.dispatch('sentence/getSentence', {append: false});
    await store.dispatch('sentence/getSpecial', {ps: 5});
  },
  async fetch ({ store, params }) {
    // 
  },
  head () {
    return {
      title: '句摘文学'
    }
  },
  loading: true,
  mixins: [scrollEvent],
  components: {
    sentenceMoudel, siderMoudel, reMark, artTag, authInfo, indexBanner, navMoudel
  },
  computed: {
    ...mapGetters('sentence', ['sentenceList', 'specialList']),
    ...mapGetters(['category'])
  },
  methods: {
    ...mapMutations('sentence', {
      setNextPgaeOpt: 'SET_NEXTPAGE_OPT'
    }),
    ...mapActions('sentence', {
       getSentence: 'getSentence'
    }),
    async reachBottomLoad() {
      this.setNextPgaeOpt();
      await this.$store.dispatch('sentence/getSentence', {
        append: true
      });
    }
  },
  mounted() {
      // window.onresize = () => {
      //   this.screenWidth = window.innerWidth;
      // }
  }
}
</script>

<style>

</style>
